<template>
	<view class="container">
		<!-- 消息提示 -->
		<u-toast ref="uToast" />

		<!-- 弹出层 -->
		<!-- 播放模式选择 -->
		<view>
			<u-popup :show="radioShow" :round="10" mode="center" overlay=false @close="close" @open="open">
				<view style="height: 250px;width: 200px;display: flex;flex-direction: column;">
					<view style="height: 50px;">
						<text style="font-weight: bold;">切换播放源</text>
					</view>
					<view style="height: 150px;">
						<u-radio-group v-model="radiovalue" placement="column" @change="groupChange">
							<u-radio style="margin-top: 15px;margin-left: 15px;" :customStyle="{marginBottom: '8px'}"
								v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
					<view style="height: 50px; display: flex;flex-direction: row;text-align: center;">
						<view style="width: 50%;">
							<text @click="radioCancel">取消</text>
						</view>
						<view style="width: 50%;">
							<text @click="radioConfirm">确认</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 视频简介 -->
		<view>
			<u-popup :show="introShow" :round="10" mode="bottom" closeable=true overlay=false
				@close="introShow = !introShow" @open="open">
				<view style="height: 100vw;display: flex;flex-direction: column;margin: 0 1% 10px 1%;">
					<view style="height: 30px;margin-top: 10px;">
						<text style="font-weight: bold;font-size: 18px; margin-left: 10px;">视频简介</text>
					</view>
					<scroll-view scroll-y="true" scrollTop=0 style="height: 90vw;">
						<view style="height: 320px;width: 100%;display: flex;flex-direction: row;">
							<!-- 图片区 -->
							<view>
								<image style="height: 90%;width: 150px;" :src="imgSrc"></image>
							</view>
							<!-- 描述区 -->
							<view
								style="font-size: 15px; display: flex;flex-direction: column;height: 100%;width: 100%;margin-left: 5px;">
								<text>名称：{{vodDetail.vodName}}</text>
								<text>别名：{{vodDetail.vodSub}}</text>
								<text>类型：{{vodDetail.vodTag}}</text>
								<text>评分：{{vodDetail.vodScore}}</text>
								<text>导演：{{vodDetail.vodDirector}}</text>
								<text>演员：{{vodDetail.vodActor}}</text>
								<text>年份：{{vodDetail.vodYear}}</text>
								<text>地区：{{vodDetail.vodArea}}</text>
								<text>语言：{{vodDetail.vodLang}}</text>
								<text>更新时间：{{vodDetail.vodTime}}</text>
								<text>备注：{{vodDetail.vodRemarks}}</text>
							</view>
						</view>
						<!-- 剧情介绍 -->
						<view>
							<text>剧情介绍</text>
						</view>
						<view style="font-size: 14px;" v-html="vodDetail.vodContent">
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
		<!-- end -->

		<!-- 集数列表 -->
		<view>
			<u-popup :show="anthologyPopup" :round="10" mode="bottom" closeable=true overlay=false
				@close="anthologyPopup = !anthologyPopup">
				<view style="height: 500px;display: flex;flex-direction: column;">
					<scroll-view scroll-y="true" show-scrollbar="false"
						style="height: 100%;width: 100%;display: flex;flex-direction: row;margin-top: 30px;">
						<view class="f-wrap" style="height: auto;width: 100%;">
							<view class="video-Anthology-list-scroll-box" style="margin-top: 20px;margin-left: 30px;"
								v-for="(url,index) in Anthologylist " :key="index"
								:style="{color:Anthologylistindex===index?'#ff0000':'#fff'}"
								@tap="Anthologylists(url,index)">
								{{(index+1)}}
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
		<!-- end -->

		<view style="height: var(--status-bar-height);"></view>

		<!-- 原生播放器 -->
		<view v-if="playMode==='原生'" class="player">
			<view class="videoBox">
				<video id="myVideo" style="object-fit: fill;height: 100%;width: 100%;" :src="src" play-strategy=2
					page-gesture show-mute-btn vslide-gesture=true enable-play-gesture=true
					:title="vodDetail.vodName +'第'+ (Anthologylistindex+1)+'集'" vslide-gesture-in-fullscreen
					:danmu-list="danmuList" enable-danmu danmu-btn controls></video>
			</view>
			<!-- 弹幕发送-->
			<view class="danmu">
				<view class="danmuInput" style="width: 100%;">
					<input style="border: 1px solid #ffce45;height: 35px;" v-model="danmuValue" type="text"
						placeholder="在此处输入弹幕内容" />
				</view>
				<view class="sendDanmu">
					<button style="width: 90px;font-size: 15px;background-color: #ffce45;" @click="sendDanmu"
						class="page-body-button">发送弹幕</button>
				</view>
			</view>
			<!-- end -->
		</view>
		<!-- web视频源 -->
		<view v-if="playMode!='原生'" class="player">
			<view class="videoBox">
				<web-view :src="webviewSrc"></web-view>
			</view>
		</view>
		<!-- 视频简介 -->
		<view class="intro">
			<!-- 标题 -->
			<view style="width: 100%;display: flex;flex-direction: row;">
				<view style="height: 50px;width: 80%;">
					<text style="font-weight: bold;font-size: 18px;">{{vodDetail.vodName}}</text>
					<text style="font-weight: bold;color: red;font-size: 20px;">{{vodDetail.vodDoubanScore}}</text>
				</view>
				<!-- 换源 -->
				<view style="height: 50px;width: 20%;align-items: center;text-align: center;">
					<view @click="radioShow =!radioShow"
						style="background-color: #b0b0b0;border-radius:35px;margin-top: 13px;">
						<image style="height: 20px;width: 20px;" src="/static/img/video/play.png"></image>
						<text>换源</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能栏 -->
		<view style="margin-top: 10px;">
			<view class="tab_control">
				<view class="u-demo-block__content">
					<u-row justify="space-between" gutter="10">
						<u-col span="3">
							<view class="demo-layout" style="text-align: center;">
								<view style="display: flex;flex-direction: column;align-items: center;">
									<image style="height: 38px;width: 38px;"
										src="/static/img/video/customer_service.png">
									</image>
									<text style="font-size: 5px;">反馈</text>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view style="text-align: center;">
								<view @click="commentShow = !commentShow"
									style="display: flex;flex-direction: column;align-items: center;">
									<image style="height: 38px;width: 38px;" src="/static/img/video/message.png">
									</image>
									<text style="font-size: 5px;">评论</text>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view style="text-align: center;">
								<view @click="introShow = !introShow"
									style="display: flex;flex-direction: column;align-items: center;">
									<image style="height: 38px;width: 38px;" src="/static/img/video/list.png"></image>
									<text style="font-size: 5px;">简介</text>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view style="text-align: center;">
								<view @click="favourite"
									style="display: flex;flex-direction: column;align-items: center;">
									<image style="height: 38px;width: 38px;"
										:src="isFavourite?'/static/img/video/like_filled.png':'/static/img/video/like.png'">
									</image>
									<text style="font-size: 5px;">收藏</text>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<!-- end -->
		<!-- 选集 -->
		<view class="video-Anthology">
			<view class="video-Anthology-title">
				<view><text>选集</text></view>
				<view @click="anthologyPopup = !anthologyPopup" class="video-Anthology-box"
					style="background-color: #ebebeb;padding: 1px; border-radius: 30px;">{{Anthologylist.length}}集>
				</view>
			</view>
			<scroll-view scroll-x="true" show-scrollbar="false" class="video-Anthology-list">
				<view class="f-wrap" :style="{width:Anthologylist.length*63+'px'}">
					<view class="video-Anthology-list-scroll-box" v-for="(url,index) in Anthologylist " :key="index"
						:style="{color:Anthologylistindex===index?'#ff0000':'#fff'}" @tap="Anthologylists(url,index)">
						{{(index+1)}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 通知 -->
		<view>
			<u-notice-bar speed="80" :text="informText"></u-notice-bar>
		</view>

		<!-- 评论 -->
		<view v-if="commentShow" class="comment">
			<view style="margin-left: 26rpx;">
				<text>评论</text>
			</view>
		</view>
		<!-- end -->
		<!-- 猜你喜欢 -->
		<view v-if="!commentShow">
			<view class="hot">
				<view class="module-top">
					<text style="font-weight: bold;font-size: 18px;margin-left: 10px;">猜你喜欢</text>
				</view>

				<scroll-view scroll-x="true" show-scrollbar="false" style="height: 215px;width: 100%;margin-top: 10px;">
					<view class="f-wrap" :style="{width:guessYouLikeVodList.length*125+'px'}">
						<view class="guessYouLikeVodList-scroll-box"
							v-for="(listItem,listIndex) in guessYouLikeVodList " :key="index">

							<image class="vodImg" :src="listItem.vodPic" @click="imgClick(listItem.vodId)">
							</image>
							<text
								style="width: 120px;padding: 8px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{listItem.vodName}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
	import {
		http
	} from '@/config/common.js'
	import {
		getGuessYouLike,
		addHistory,
		addFavourite,
		deleteFavourite,
		isFavourite
	} from '@/config/api.js'

	var wv; //计划创建的webview

	export default {
		data() {
			return {
				userId: '',
				vodId: '',
				src: "",
				webviewSrc: '',
				playMode: '原生',
				NowPlayMode: '原生', //目前的播放模式
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				radiolist: [{
						name: '原生',
						disabled: false
					},
					{
						name: 'web',
						disabled: false
					},
					{
						name: '跳转网页',
						disabled: false
					}
				],
				radiovalue: '原生',
				radioShow: false,
				introShow: false,
				vodDetail: {},
				imgSrc: "",
				videoContext: {},
				danmuValue: '',
				Anthologylistindex: 0,
				Anthologylist: [],
				guessYouLikeVodList: [],
				commentShow: false,
				informText: '如果遇播放卡顿或播放不了，请点击换源播放。',
				anthologyPopup: false,
				isFavourite: false
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo', this)
			// #endif
		},
		onLoad: function(res) {
			this.vodId = res.vodId;
			//初始化数据
			this.init(this.vodId);

			//指定集
			setTimeout(() => {
				if (res.anthology) {
					this.Anthologylists("", Number(res.anthology))
				}
			}, 1000);
		},
		onShow() {

		},
		methods: {
			//初始化数据方法
			init(vodId) {
				//获取用户账户
				if (getApp().globalData.isLogin) {
					try {
						var res = uni.getStorageSync('user')
						if (res) {
							this.userId = res.userId
						}
					} catch (e) {
						// error
						console.log(e)
					}
				}

				http.get('/vod/vodDetail/' + vodId, {})
					.then(data => {
						this.Anthologylist = data.data.data.m3u8Urls;
						this.src = this.Anthologylist[this.Anthologylistindex];
						this.webviewSrc = 'https://jx.wolongm3u8.com:65/m3u8.php?url=' + this.src;
						this.vodDetail = data.data.data;
						this.imgSrc = this.vodDetail.vodPic;
						//猜你喜欢
						this.guessYouLike();

						//判断是否收藏
						isFavourite({
							params: {
								userId: this.userId,
								vodId: this.vodId
							}
						}).then(res => {
							if (res.data.data === 0) {
								this.isFavourite = false;
							} else {
								this.isFavourite = true;
							}
						}).catch(err => {
							console.log(err);
						})

						//增加或更新历史记录，要求登录
						if (getApp().globalData.isLogin) {
							addHistory({
								params: {
									userId: this.userId,
									vodId: this.vodId,
									anthology: this.Anthologylistindex + 1
								}
							});
						}

					}).catch(err => {
						console.log(err)
					});
			},
			//webview初始化
			initWebview() {
				// #ifdef APP-PLUS
				var currentWebview = this.$scope
					.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
				setTimeout(function() {
					wv = currentWebview.children()[0]
					wv.setStyle({
						height: 200,
						videoFullscreen: 'landscape'
					})
				}, 1000); //如果是页面初始化调用时，需要延时一下
				// #endif

				//增加或更新历史记录，要求登录
				if (getApp().globalData.isLogin) {
					addHistory({
						params: {
							userId: this.userId,
							vodId: this.vodId,
							anthology: Number(this.Anthologylistindex + 1)
						}
					});
				}
			},
			radioCancel() {
				this.radioShow = false;
				this.radiovalue = this.playMode;
			},
			radioConfirm() {
				this.radioShow = false;
				//选择播放模式
				if (this.radiovalue === '跳转网页') {
					this.radiovalue = '原生';
					plus.runtime.openURL('https://ikan.wang/Player/' + this.vodId + '/' + Number(this.Anthologylistindex +
						1));
					return;
				}
				this.playMode = this.radiovalue;
				if (this.playMode === 'web') {
					this.initWebview();
				}
			},
			groupChange(name) {
				console.log(name);
			},
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			//根据id获取视频详细信息

			//选集
			Anthologylists(url, index) {
				this.Anthologylistindex = Number(index);
				this.src = this.Anthologylist[this.Anthologylistindex];
				this.anthologyPopup = false;
				//webview
				this.webviewSrc = 'https://jx.wolongm3u8.com:65/m3u8.php?url=' + this.src;

				//增加或更新历史记录，要求登录
				if (getApp().globalData.isLogin) {
					addHistory({
						params: {
							userId: this.userId,
							vodId: this.vodId,
							anthology: this.Anthologylistindex + 1
						}
					});
				}
			},
			//收藏
			favourite() {
				if (!getApp().globalData.isLogin) {
					this.$refs.uToast.show({
						position: 'top',
						message: '请登录',
						type: 'error',
					})
					return;
				}
				if (!this.isFavourite) {
					//收藏
					addFavourite({
						params: {
							userId: this.userId,
							vodId: this.vodId
						}
					}).then(res => {
						if (res.data.data === 0) {
							this.isFavourite = false;
						} else {
							this.isFavourite = true;
						}
					}).catch(err => {
						console.log(err)
					})
				} else {
					//取消收藏
					deleteFavourite({
						params: {
							userId: this.userId,
							vodId: this.vodId
						}
					}).then(res => {
						if (res.data.data === 0) {
							this.isFavourite = true;
						} else {
							this.isFavourite = false;
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			//猜你喜欢
			guessYouLike() {
				getGuessYouLike({
					params: {
						class: this.vodDetail.vodClass,
						area: this.vodDetail.vodArea,
						tag: this.vodDetail.vodTag
					}
				}).then(res => {
					var data = res.data.data;
					this.guessYouLikeVodList = data;
				}).catch(err => {
					console.log(err)
				});
			},
			//点击音频事件
			imgClick(data) {
				//data：vodId
				uni.navigateTo({
					url: '/pages/video/video?vodId=' + data,
				})
			},
			//返回上一级
			back() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>


<style>
	.f-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.container {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}

	.player {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.videoBox {
		height: 200px;
		width: 100%;
	}

	.danmu {
		width: 100%;
		height: 40px;
		margin-top: 1px;
		display: flex;
		flex-direction: row;
	}

	.intro {
		height: 50px;
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.video-Anthology {
		width: 95%;
		height: 200rpx;
		margin: 0 auto;
		margin-top: 10rpx;
		border-radius: 10rpx;
	}

	.video-Anthology-title {
		width: 100%;
		height: 50rpx;
		position: relative;
		color: #C0C0C0;
	}

	.video-Anthology-box {
		position: absolute;
		top: 10rpx;
		right: 0rpx;
		font-size: 26rpx;
	}

	.video-Anthology-list {
		width: 100%;
		height: 110rpx;
		border-bottom: 1rpx solid #808080;
		padding-bottom: 10rpx;
	}

	.video-Anthology-list-scroll-box {
		width: 100rpx;
		height: 100rpx;
		background: #ffce45;
		color: #FFFFFF;
		border-radius: 10rpx;
		text-align: center;
		line-height: 100rpx;
		margin-right: 20rpx;
	}

	.comment {
		height: 400px;
		width: 100%;
	}

	.vodImg {
		width: 120px;
		height: 190px;
		background-color: #eeeeee;
		border-radius: 6px;
	}

	.guessYouLikeVodList-scroll-box {
		display: flex;
		flex-direction: column;
		width: 130px;
		height: 215px;
		border-radius: 10px;
		text-align: center;
		line-height: 10px;
		margin-right: 1px;
	}
</style>